import React from 'react';
import { Icon, Menu, Divider, Form } from 'antd';

const TreeMenu = props => {
  const { rightClickNodeTreeItem, hideMenu, isDisabled } = props;
  const { pageX, pageY, display } = { ...rightClickNodeTreeItem };
  const tmpStyle = {
    position: 'absolute',
    left: `${pageX - 200}px`,
    top: `${pageY - 102}px`,
    display,
    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
  };
  // 点击取消隐藏
  function hideRight(e) {
    hideMenu('none');
  }

  function handleMenuClick(e) {

    props.callbackChild(e);
  }

  return (
    <div style={tmpStyle} className="self-right-menu" onMouseLeave={hideRight}>
      <Menu onClick={handleMenuClick}>
        <Menu.Item key="add">
          <Icon type="plus" />
          添加分类
        </Menu.Item>
        <Divider style={{ margin: 0 }} />
        <Menu.Item key="del">
          <Icon type="delete" />
          删除分类
        </Menu.Item>
        <Divider style={{ margin: 0 }} />
        <Menu.Item key="alter">
          <Icon type="edit" />
          修改分类
        </Menu.Item>
        <Divider style={{ margin: 0 }} />
        {isDisabled === 0 ? (
          <Menu.Item key="off">
            <Icon type="pause-circle" />
            停用分类
          </Menu.Item>
        ) : (
          <Menu.Item key="on">
            <Icon type="play-circle" />
            启用分类
          </Menu.Item>
        )}

        <Divider style={{ margin: 0 }} />
        <Menu.Item key="up">
          <Icon type="arrow-up" />
          上移分类
        </Menu.Item>
        <Divider style={{ margin: 0 }} />
        <Menu.Item key="down">
          <Icon type="arrow-down" />
          下移分类
        </Menu.Item>
        <Menu.Item key="move">
          <Icon type="swap" />
          移动分类
        </Menu.Item>
      </Menu>
    </div>
  );
};

export default TreeMenu;
